<template>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="12">
            <a-col :md="4" :sm="8">
              <a-form-item label="" :labelCol="{ span: 6 }" :wrapperCol="{ span: 14, offset: 0 }">
                <a-input placeholder="请输入活动名称" v-model="queryParam.name"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="8">
              <a-form-item label="" :labelCol="{ span: 6 }" :wrapperCol="{ span: 14, offset: 0 }">
                <a-select ref="select" v-model="queryParam.brandId" placeholder="品牌" allowClear>
                  <a-select-option :value="item.id" v-for="(item, index) in brandOption" :key="index">{{ item.brandName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="8">
              <a-form-item label="" :labelCol="{ span: 6 }" :wrapperCol="{ span: 14, offset: 0 }">
                <a-select ref="select" v-model="queryParam.status" placeholder="状态" allowClear>
                  <a-select-option :value="item.value" v-for="(item, index) in statusOption" :key="index">{{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
  
        <div class="table-operator" style="border-top: 5px">
          <a-button type="primary" @click="handleAdd">新增</a-button>
          <a-button type="primary" @click="appointment">ID预约次数配置</a-button>
        </div>
  
        <a-table ref="table" rowKey="id" size="middle" :columns="columns" :dataSource="dataSource"
          :pagination="ipagination" :loading="loading" @change="handleTableChange">
          <span slot="status" slot-scope="text, record">
            <a-switch :checked="record.status == 0" @click="handleSwitch(record, $event ? ischoose : noChoose)"></a-switch>
            {{ record.statusText }}
          </span>
          <span slot="url" slot-scope="text">
            <img :src="text" alt="" class="thumbnail" />
          </span>
          <span slot="action" slot-scope="text, record">
            <a @click="handleEdit(record)">
              <!-- <a-icon type="edit"/> -->
              编辑
            </a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a>删除</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a @click="handlecopy(record)">
              复制小程序路径
            </a>
            <a-divider type="vertical" />
            <a @click="clickewm(record)">查看二维码</a>
          </span>
        </a-table>
      </div>
  
      <activity-Modal ref="modalForm" @ok="modalFormOk"></activity-Modal>
      <a-modal title="ID预约次数配置" :width="700" :visible="appointmentVisible" :confirmLoading="confirmLoading"
        @ok="appointmentOk" @cancel="appointmentCancel" cancelText="关闭">
        <a-spin :spinning="confirmLoading">
          <a-form-model ref="form" :model="model1" :rules="validatorRules">
            <a-form-model-item :labelCol="{ span: 6 }" :wrapperCol="{ span: 14, offset: 0 }" label="每个ID限制预约次数">
              <a-input-number placeholder="请输入每个ID限制预约次数" v-model="model1.num" style="width:365px" :min="0" :precision="0"/>
            </a-form-model-item>
  
          </a-form-model>
        </a-spin>
      </a-modal>
      <a-modal title="二维码" :dialog-style="{ top: '200px' }" :visible="qrcodeVisible" @ok="clickCode()" okText="下载二维码"
        @cancel="() => (qrcodeVisible = false)">
        <img style="width: 200;margin-left: 17%;" :src="qrCode" />
      </a-modal>
    </a-card>
  </template>
  
  <script>
  import { filterObj } from '@/utils/util';
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import activityModal from './modules/activityModal'
  import { brandList, saveOrUpdateParameter,getMaxIdNum,updateMaxIdNum } from '@/api/marketingCenter/invite.js'
  
  export default {
    name: '',
    mixins: [JeecgListMixin],
    components: {
      activityModal
    },
    data() {
      return {
        validatorRules: {
          coverImage: [{ required: true, message: '请上传图片!' }],
        },
        dataSource: [
          { url: "https://img.bzhz.jnbygroup.com/FqsT7id6FBqIxPA3LV3oM8Qx5mWf" }
        ],
        appointmentVisible: false,
        loading: false,
        confirmLoading: false,
        qrcodeVisible: false,
        qrCode: '',
        queryParam: {
          current: 1,
          size: 10,
        },
        model: {},
        model1:{},
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 120,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '封面图',
            align: "center",
            dataIndex: 'coverImage',
            width: 100,
            scopedSlots: { customRender: 'url' }
          },
          {
            title: '活动名称',
            align: "center",
            dataIndex: 'name',
          },
          {
            title: '品牌',
            align: "center",
            dataIndex: 'brandText',
          },
          {
            title: '活动地址',
            align: "center",
            dataIndex: 'address',
          },
          {
            title: '积分价格',
            align: "center",
            dataIndex: 'price',
          },
          {
            title: '状态',
            align: 'center',
            dataIndex: 'statusText',
            scopedSlots: { customRender: 'status' }
          },
          {
            title: '操作',
            align: "center",
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
          }
        ],
        url: {
          list: "/backend/invitation/pageActivityVo",
          delete: "/backend/invitation/delActivityById",
        },
        brandOption: [],
        statusOption: [
          { value: "0", label: "启用" },
          { value: "1", label: "禁用" },
        ],
        ischoose: 0,
        noChoose: 1,
        status: '启用',
        qrcodeVisible: false,
        qrCode: '',
      }
    },
    created() {
      this.getbrandList()
    },
    methods: {
      clickewm(record) {
        // setTimeout(() => {
        this.qrcodeVisible = true
        // }, 1000);
        this.qrCode = record.qrCode
      },
      clickCode(record) {
        this.removeVisible = false
        this.downloadIamge(this.qrCode, '二维码');
      },
      downloadIamge(imgsrc, name) {
        //下载图片地址和图片名
        var image = new Image();
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function () {
          var canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          var context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, image.width, image.height);
          var url = canvas.toDataURL("image/png");
  
          var a = document.createElement("a");
          var event = new MouseEvent("click");
          a.download = name || "photo";
          a.href = url;
          a.dispatchEvent(event);
        };
        image.src = imgsrc;
      },
      handlecopy(val) {
        var cInput = document.createElement("input");
        // cInput.value = val;//复制的内容
        cInput.value = '/packages/wm-cloud-jnbymemberactivities/actDetails/index?id='+val.id;//复制的内容
        document.body.appendChild(cInput);
        cInput.select();
        document.execCommand("copy");
        this.$message.success('复制成功')
        document.body.removeChild(cInput);
      },
  
      //ID预约次数配置
      appointment() {
        getMaxIdNum().then(res=>{
          res.num=res.data
          this.model1=Object.assign({},res)
          this.appointmentVisible = true
        })
      },
      appointmentOk() { 
        updateMaxIdNum({num:this.model1.num}).then(res=>{
          var that = this 
          if (res.success) {
            that.$message.success(res.msg)
            that.$emit('ok')
            this.appointmentVisible = false
          } else {
            that.$message.warning(res.msg)
          }
        })
      },
      appointmentCancel() {
        // this.$emit('close')
        this.appointmentVisible = false
        this.$refs.form.resetFields();
      },
      getQueryParams() {
        var param = Object.assign({}, this.queryParam);
        param.current = this.ipagination.current;
        param.size = this.ipagination.pageSize;
        return filterObj(param);
      },
      getbrandList() {
        brandList().then(res => {
          if (res.code == 200) {
            this.brandOption = res.data
          }
        })
      },
      handleSwitch(record, cover) {
        console.log(record, cover);
        saveOrUpdateParameter({
          'id': record.id,
          'brandId': record.brandId,
          'status': cover,
          'statusText':cover==0?'启用':cover==1?'禁用':''
        }).then(res => {
          if (res.code == 200) {
            this.$message.success(res.msg)
            this.loadData(1)
          } if (res.code == 500) {
            this.$message.warning(res.msg)
          }
        })
      },
    }
  }
  </script>
  <style scoped>
  .thumbnail {
    width: 100px;
    height: 100px;
  }
  </style>